<template>
  <el-dialog
    width="998px"
    class="dialog-workorder-track"
    :close-on-click-modal="false"
    :visible.sync="dialogShow"
    @close="onHide()">
    <template slot="title">
      <div class="header">
        <span class="title">工单处理信息（工单号{{ workOrderNo }}）</span>
        <div class="new-info">
          <span class="tag">新</span>
          <span class="text">【跟进内容】{{ followUpContent }}</span>
        </div>
      </div>
    </template>
    <div class="line-box">
      <el-timeline class="track-line">
        <el-timeline-item v-for="(item, key) in trackList" :key="key" size="large" :hide-timestamp="true"
          :timestamp="key" placement="top">
          <div class="time-key">{{ key }}</div>
          <div class="right-content" v-for="(ele, index) in item" :key="index">
            <span class="time">{{ ele.time }}</span>
            <span class="type">{{ ele.workOrderStatus | filterDict(dict.type['ali_work_order_status']) }}</span>
            <span class="type">{{ ele.workOrderNeed | filterDict(dict.type['ali_work_order_deal_status']) }}</span>
            <el-row>
              <span class="type">{{ ele.workOrderDetain | filterDict(dict.type['ali_work_order_deal_type']) }}</span>
              <span class="desc">{{ ele.followUpContent }}</span>
            </el-row>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div slot="footer" class="footer">
      <el-button type="primary" @click="handleDeal()">新增跟进</el-button>
      <el-button @click="onHide()">取 消</el-button>
    </div>

    <!-- dialog-workorder-deal begin -->
    <dialog-workorder-deal :show.sync="dialogDeal" :id="orderId" @refresh="getDetail" />
    <!-- dialog-workorder-deal end -->
  </el-dialog>
</template>
<script>
import mixin from '@/utils/filtermixin/mixin';
import DialogWorkorderDeal from './dialog-workorder-deal';
import * as API_WorkorderTrack from '@/api/aliorder/worktrack';

export default {
  name: 'dialog-workorder-track',
  dicts: [
    'ali_work_order_status',
    'ali_work_order_deal_status',
    'ali_work_order_deal_type'
  ],
  components: {
    DialogWorkorderDeal
  },
  mixins: [mixin],
  props: {
    show: {
      type: Boolean,
      default: false
    },
    order: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      dialogShow: false,
      trackList: [],
      orderId: undefined,

      dialogDeal: false
    };
  },
  computed: {
    workOrderNo ({ order }) {
      return order.workOrderNo;
    },
    followUpContent ({ order }) {
      return order.followUpContent;
    }
  },
  watch: {
    show (newVal) {
      if (newVal) {
        this.orderId = this.order.id;
        this.getDetail();
      } else {
        this.dialogShow = false;
      };
    },
    sourceList: {
      handler (newVal) {
        this.trackList = {};
        (newVal || []).map(this.formatItem);
      },
      immediate: true
    }
  },
  methods: {
    /**
      * @date 2025/07/10
      * @author wolfMan
      * @description {关闭弹层}
    */
    onHide () {
      this.$emit('update:show', false);
    },
    /**
      * @date 2025/07/10
      * @author wolfMan
      * @description {获取处理信息}
    */
    getDetail () {
      const _params = {
        workOrderId: this.orderId,
        pageNum: 1,
        pageSize: 100
      };
      API_WorkorderTrack.getListService(_params).then(response => {
        this.dialogShow = true;
        let _trackList = response.rows || [];
        _trackList = _trackList.reduce((acc, obj) => {
          let split = obj.createTime.split(' ');
          const group = split[0];
          if (!acc[group]) {
            acc[group] = [];
          }
          acc[group].push({ ...obj, time: split[1] });
          return acc;
        }, {});
        this.trackList = _trackList;
      });
    },
    /**
      * @date 2025/07/10
      * @author wolfMan
      * @description {时间格式化}
    */
    formatItem (data) {
      if (!data) {
        const [date, time] = data.createTime.split(' ');
        if (!this.trackList[date]) {
          this.trackList[date] = [];
        };
        this.trackList[date].push({ ...data, time });
      };
    },
    /**
      * @date 2025/07/10
      * @author wolfMan
      * @description {新增处理弹层}
    */
    handleDeal () {
      this.dialogDeal = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-workorder-track {
  ::v-deep .el-dialog {
    &__header {
      background: #f0f6ff;
      .header {
        color: #18191c;
        .title {
          font-weight: 500;
          font-size: 22px;
          line-height: 30px;
        }
        .new-info {
          margin-top: 4px;
          line-height: 26px;
          font-size: 14px;
          .tag {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ff0000;
            color: #fff;
            font-size: 12px;
          }
        }
      }
    }
  }
  .line-box {
    padding: 40px 10px 0 100px;
  }
  .track-line {
    display: flex;
    flex-direction: column;
    .time-key {
      position: absolute;
      left: -100px;
      color: #515152;
      font-size: 14px;
      font-weight: 500;
    }
    .right-content {
      display: flex;
      align-items: flex-start;
      margin-bottom: 10px;
      width: 100%;
      line-height: 20px;
      color: #515152;
      .time {
        display: inline-flex;
        padding-right: 20px;
        min-width: 60px;
        font-weight: 500;
      }
      .type {
        display: inline-flex;
        padding-left: 10px;
        min-width: 60px;
      }
      .desc {
        padding-left: 10px;
        word-break: keep-all;
      }
      .track-success {
        margin-left: 20px;
        color: #67c23a;
      }
      .track-fail {
        margin-left: 20px;
        color: #f56c6c;
      }
    }
  }
}
</style>